<template>
    <!-- component -->
    <div class=" border-t-2 border-red-600">

        <div class="max-w-screen-2xl mx-auto">
            <!-- header -->
            <x-header></x-header>
            <x-marquee></x-marquee>
            <!-- header ends here -->
            <x-main></x-main>
            <!-- main ends here -->
            <x-footer></x-footer>

            <!-- footer -->
        </div>
    </div>
</template>

<script>
import XHeader from '@/layouts/components/header/header.vue'
import XFooter from '@/layouts/components/footer/footer.vue'
import XMain from '@/layouts/components/main/main.vue'
import XNav from '@/layouts/components/nav/nav.vue'
import XMarquee from '@/layouts/components/header/marquee.vue'

export default {
    route: {path: '/'},
    components: {XHeader, XFooter, XMain, XNav, XMarquee},
}
</script>

<style scoped>

</style>
